<template>
	<view>
		
		<view class='share-box' :class="showModal ? '' : 'hide'">
			<view class='choose'>
				<view class="main-content">
					<view class="qrimg">
					    <tki-qrcode
					    ref="qrcode"
					    :val="userCard"
						:usingComponents="true"
						:showLoading="false"
						:onval="true"
						:size="300"
						:show="true"
						@result="qrResult">
						</tki-qrcode>
						<view style="">取餐二维码</view>
					</view>
				</view>
				<view style="padding: 0 40%;" @click='close' class="iconfont icon icon-guanbi close"></view>
			</view>
			<view :class="showModal ? 'maskLayer' : ''" @click='close'></view>
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		name:'jhxUserCard',
		components: {
			tkiQrcode
		},
		props: {   

		},
		data() {
			return {
				showModal:false,
				userCard:''
			}
		},
		created() {
			var user = uni.getStorageSync('user');
			if(user){
				this.userCard = user.member.card_number;
			}
		},
		watch:{
			
		},
		methods:{
			
			//展示会员卡二维码
			open:function(order){
				this.$refs.qrcode._makeCode();
				this.showModal=true 
				
			},
			close:function(){
				this.showModal=false;
			},
		}
	}
</script>

<style lang="scss">
	.choose{width:80%;-webkit-animation: spin .2s linear ;animation: spin .2s linear;position: fixed;top: 20%;left:10%;z-index: 991;}
	.main-content{background-color: #fff;padding: 40rpx 20rpx;border-radius: 10rpx;}
	.close{color: #f9f9f9;margin-top: 40rpx;text-align: center;font-size: 80rpx;}
	.closeTab{color: #f9f9f9;margin-top: 100rpx;text-align: center;font-size: 80rpx;position: fixed;bottom: 80rpx;text-align: center;width: 100%;}
	.content{border: 1px solid #ccc;width: 96%;margin:40rpx 0;padding: 20rpx;box-sizing: border-box;}
	.confirm{padding: 20rpx;background-color: #ff6600;color: #fff;text-align: center;border-radius: 60rpx;}
	.maskLayer{z-index: 99;}
	.hide{display: none;}
	.qrimg{text-align: center;}
</style>
